<template>
    <XyzTransition
            :appear="appear"
            :appear-visible="appearVisible"
            :duration="naiveDuration"
            :mode="mode"
            :xyz="xyz"
    >
        <slot/>
    </XyzTransition>
</template>

<script lang="ts" setup>

import {computed} from "vue";

interface Props {
    appear?: boolean,
    appearVisible?: boolean | object,
    naiveDuration?: number | "auto" | { appear: number | "auto", in: number | "auto", out: number | "auto" },
    mode?: "out-in" | "in-out",
    right?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    left?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    down?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    up?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    front?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    back?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    small?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    big?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    narrow?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    wide?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    short?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    tall?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    thin?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    thick?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    flipUp?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    flipDown?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    flipLeft?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    flipRight?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    rotateLeft?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    rotateRight?: true | "0" | "1" | "2" | "3" | "4" | "5" | "25%" | "50%" | "75%" | "100%"
    skewLeft?: true | "0" | "1" | "2" | "3" | "4" | "5"
    skewRight?: true | "0" | "1" | "2" | "3" | "4" | "5"
    skewUp?: true | "0" | "1" | "2" | "3" | "4" | "5"
    skewDown?: true | "0" | "1" | "2" | "3" | "4" | "5"
    perspective?: true | "0" | "1" | "2" | "3" | "4" | "5",
    origin?: true | "center" | "top" | "bottom" | "left" | "right" | "top-right" | "top-left" | "bottom-left" | "bottom-right"
    duration?: true | "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "15" | "20" | "25" | "30",
    delay?: true | "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "15" | "20" | "25" | "30",
    ease?: true | "ease" | "linear" | "in" | "in-back" | "out" | "out-back" | "in-out" | "in-out-back",
    stagger?: true | "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "15" | "20" | "25" | "30",
    staggerReverse?: true | "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "15" | "20" | "25" | "30",
    iterate?: true | "1" | "2" | "3" | "4" | "5" | "infinite",
    direction?: true | "normal" | "reverse" | "alternate" | "alternate-reverse"
}

const props = withDefaults(defineProps<Props>(), {
    appear: true,
    mode: "in-out",
});

const xyz = computed(() => {
    let fade = ["fade"];
    if (props.right) fade.push(typeof props.right === "string" ? `right-${props.right}` : "right");
    if (props.left) fade.push(typeof props.left === "string" ? `left-${props.left}` : "left");
    if (props.down) fade.push(typeof props.down === "string" ? `down-${props.down}` : "down");
    if (props.up) fade.push(typeof props.up === "string" ? `up-${props.up}` : "up");
    if (props.front) fade.push(typeof props.front === "string" ? `front-${props.front}` : "front");
    if (props.back) fade.push(typeof props.back === "string" ? `back-${props.back}` : "back");
    if (props.small) fade.push(typeof props.small === "string" ? `small-${props.small}` : "small");
    if (props.big) fade.push(typeof props.big === "string" ? `big-${props.big}` : "big");
    if (props.narrow) fade.push(typeof props.narrow === "string" ? `narrow-${props.narrow}` : "narrow");
    if (props.wide) fade.push(typeof props.wide === "string" ? `wide-${props.wide}` : "wide");
    if (props.short) fade.push(typeof props.short === "string" ? `wide-${props.short}` : "short");
    if (props.tall) fade.push(typeof props.tall === "string" ? `tall-${props.tall}` : "tall");
    if (props.thin) fade.push(typeof props.thin === "string" ? `thin-${props.thin}` : "thin");
    if (props.thick) fade.push(typeof props.thick === "string" ? `thick-${props.thick}` : "thick");
    if (props.flipUp) fade.push(typeof props.flipUp === "string" ? `flip-up-${props.flipUp}` : "flip-up");
    if (props.flipDown) fade.push(typeof props.flipDown === "string" ? `flip-down-${props.flipDown}` : "flip-down");
    if (props.flipLeft) fade.push(typeof props.flipLeft === "string" ? `flip-left-${props.flipLeft}` : "flip-left");
    if (props.flipRight) fade.push(typeof props.flipRight === "string" ? `flip-right-${props.flipRight}` : "flip-right");
    if (props.rotateLeft) fade.push(typeof props.rotateLeft === "string" ? `rotate-left-${props.rotateLeft}` : "rotate-left");
    if (props.rotateRight) fade.push(typeof props.rotateRight === "string" ? `rotate-right-${props.rotateRight}` : "rotate-right");
    if (props.skewLeft) fade.push(typeof props.skewLeft === "string" ? `skew-left-${props.skewLeft}` : "skew-left");
    if (props.skewRight) fade.push(typeof props.skewRight === "string" ? `skew-right-${props.skewRight}` : "skew-right");
    if (props.skewUp) fade.push(typeof props.skewUp === "string" ? `skew-up-${props.skewUp}` : "skew-up");
    if (props.skewDown) fade.push(typeof props.skewDown === "string" ? `skew-down-${props.skewDown}` : "skew-down");
    if (props.perspective) fade.push(typeof props.perspective === "string" ? `perspective-${props.perspective}` : "perspective");
    if (props.origin) fade.push(typeof props.origin === "string" ? `origin-${props.origin}` : "origin");
    if (props.duration) fade.push(typeof props.duration === "string" ? `duration-${props.duration}` : "duration");
    if (props.delay) fade.push(typeof props.delay === "string" ? `delay-${props.delay}` : "delay");
    if (props.ease) fade.push(typeof props.ease === "string" ? `ease-${props.ease}` : "ease");
    if (props.stagger) fade.push(typeof props.stagger === "string" ? `stagger-${props.stagger}` : "stagger");
    if (props.staggerReverse) fade.push(typeof props.staggerReverse === "string" ? `stagger-rev-${props.staggerReverse}` : "stagger-rev");
    if (props.iterate) fade.push(typeof props.iterate === "string" ? `iterate-${props.iterate}` : "stagger-reverse");
    if (props.direction) fade.push(typeof props.direction === "string" ? `direction-${props.direction}` : "direction");
    return fade.join(" ");
});
</script>

<style lang="scss" scoped>

</style>
